<template>
	<view class="menu-body">
		<uni-loading v-if="!userInfo"></uni-loading>

		<template v-else>
			<view class="menu" v-if="!(judgeAuthority(['chejian']))">
				<view class="title">采购</view>
				<view class="menu-list">
					<view class="menu-item" @click="$navigateTo('/pages/purchase/purchase')">
						<i class="iconfont icon-cgrk" style="background: #4ad553;" />采购入库
					</view>
					<template v-if="judgeAuthority(['baocai', 'admin', 'sysadmin'])">
						<view class="menu-item" @click="$navigateTo('/pages/purchase/materialPurchase')">
							<i class="iconfont icon-cgrk" style="background: #d9a02c;" />包材采购入库
						</view>
					</template>
					<template v-if="judgeAuthority(['baocai', 'admin', 'sysadmin'])">
						<view class="menu-item" @click="$navigateTo('/pages/purchase/purOut')">
							<i class="iconfont icon-tui" style="background: #aaaa00;" />采购退货
						</view>
					</template>
				</view>
			</view>
			<view class="menu">
				<view class="title">生产</view>
				<view class="menu-list">
					<view class="menu-item" @click="$navigateTo('/pages/production/warehousing')">
						<i class="iconfont icon-scrk" />退料入库
					</view>
					<view v-if="!(judgeAuthority(['ylkg', 'kg01']))" class="menu-item" @click="$navigateTo('/pages/production/picking')">
						<i class="iconfont icon-shengchanlingliao" style="background: #d96b32;" />生产领料
					</view>
					<view class="menu-item" @click="$navigateTo('/pages/production/task?type=create')">
						<i class="iconfont icon-renwu" style="background: #59d973;" />生产任务
					</view>
					<view class="menu-item" @click="$navigateTo('/pages/production/task?type=get')">
						<i class="iconfont icon-shengchanlingliao1" style="background: #ff7b47;" />领料单领料
					</view>
					<view class="menu-item" @click="$navigateTo('/pages/production/task?type=fill')">
						<i class="iconfont icon-daqiabuqiandan" style="background: #c583c5;" />生产补料
					</view>
					<view class="menu-item" @click="$navigateTo('/pages/production/task?type=refund')">
						<i class="iconfont icon-tui" style="background: #aaaa00;" />生产退料
					</view>
					<view class="menu-item" @click="$navigateTo('/pages/production/task?type=inStock')">
						<i class="iconfont icon-shengchanlingliao" style="background: #55aa7f;" />领料单入库
					</view>
					<view class="menu-item" @click="$navigateTo('/pages/production/task?type=reverse')">
						<i class="iconfont icon-tui" style="background: #659faa;" />生产变品退料
					</view>
					<view class="menu-item" @click="$navigateTo('/pages/production/finished-products')">
						<i class="iconfont icon-cgrk" style="background: #aa5f6a;" />成品入库
					</view>
				</view>
			</view>
			<view class="menu" v-if="!(judgeAuthority(['chejian']))">
				<view class="title">销售</view>
				<view class="menu-list">
					<view class="menu-item" @click="openSelects()">
						<i class="iconfont icon-jianhuo" style="background: #e50150;" />销售拣货
					</view>
					<view class="menu-item" @click="$navigateTo('/pages/sale/sale-transfer')">
						<i class="iconfont icon-tiaoboruku" style="background: #ffaa7f;" />销售单调拨
					</view>
					<!-- <view class="menu-item" @click="$navigateTo('/pages/sale/sale-out')">
						<i class="iconfont icon-other-out" style="background: #ffaa00;" />销售单出库
					</view> -->
				</view>
			</view>
			<template v-if="!judgeAuthority(['chejian'])">
				<view class="menu">
					<view class="title">库存</view>
					<view class="menu-list">
						<view class="menu-item" @click="openRemarks('inStock')">
							<i class="iconfont icon-other-entry" style="background: #3689f5;" />其他入库
						</view>
						<view class="menu-item" @click="openRemarks('outStock')">
							<i class="iconfont icon-other-out" style="background: #ffb232;" />其他出库
						</view>
						<view class="menu-item" @click="$navigateTo('/pages/storehouse/inventory')">
							<i class="iconfont icon-pdzy" style="background: #b075ff;" />盘点作业
						</view>
						<view class="menu-item" @click="$navigateTo('/pages/storehouse/transfer')">
							<i class="iconfont icon-tiaoboruku" style="background: #75daff;" />调拨管理
						</view>
					</view>
				</view>
			</template>
			<template v-if="judgeAuthority(['yuanliao', 'admin', 'sysadmin'])">
				<view class="menu">
					<view class="title">托盘</view>
					<view class="menu-list">
						<view class="menu-item" @click="$navigateTo('/pages/tray/bindTray')">
							<i class="iconfont icon-bangdingguanli" style="background: #1ddfd2;" />托盘绑定
						</view>
					</view>
				</view>
			</template>
			<!-- <view class="menu">
				<view class="title">提示</view>
				<view class="menu-list">
					<view class="menu-item" @click="handleMediaPlayer('success')">
						<i class="iconfont icon-bangdingguanli" style="background: #1ddfd2;" />成功提示
					</view>
					<view class="menu-item" @click="handleMediaPlayer('error')">
						<i class="iconfont icon-bangdingguanli" style="background: #1ddfd2;" />失败提示
					</view>
				</view>
			</view> -->
		</template>
		<uni-popup ref="typePopup">
			    <view class="selectPopup-panel">
					<view class="selectPopup-panel-top">
						<view class="selectPopup-panel-top-title">
							选择{{ currentType === 'inStock' ? '入库' : '出库' }}类型
						</view>
						<view class="selectPopup-panel-close" @click="closetypePopup()">
							<uni-icons type="close" size="26" color="#adadad"></uni-icons>
						</view>
					</view>
			    </view>
			    <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="tepeValue" @change="typeChange" class="picker-view">
						<picker-view-column>
						    <view class="item" v-for="(item,index) in typeSelect" :key="index">{{item}}</view>
						</picker-view-column>
			    </picker-view>
				<view class="selectPopup-panel-footer">
					<button @click="handleTypeConfirm" type="primary" class="selectPopup-panel-footer-btn">确定
					</button>
				</view>
		</uni-popup>
		<uni-popup ref="selectPopup">
			    <view class="selectPopup-panel">
					<view class="selectPopup-panel-top">
						<view class="selectPopup-panel-top-title">
							选择出库类型
						</view>
						<view class="selectPopup-panel-close" @click="closeSelects()">
							<uni-icons type="close" size="26" color="#adadad"></uni-icons>
						</view>
					</view>
			    </view>
			    <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChangeOut" class="picker-view">
						<picker-view-column>
						    <view class="item" v-for="(item,index) in selects" :key="index">{{item}}</view>
						</picker-view-column>
			    </picker-view>
				<view class="selectPopup-panel-footer">
					<button @click="handleSelectConfirm" type="primary" class="selectPopup-panel-footer-btn">确定
					</button>
				</view>
		</uni-popup>
		<uni-popup ref="remarkPopup">
			<view class="remarkPopup-panel">
				<view class="remarkPopup-panel-top">
					<view class="remarkPopup-panel-top-title">
						填写{{ currentType === 'inStock' ? '入库' : '出库' }}原因
					</view>
					<view class="remarkPopup-panel-close" @click="closeRemarks">
						<uni-icons type="close" size="26" color="#adadad"></uni-icons>
					</view>
				</view>
				<view class="remarkPopup-panel-content">
					<view class="remarkPopup-panel-content-input">
						<textarea v-model="remark" placeholder="请输入原因"></textarea>
					</view>
				</view>
				<view class="remarkPopup-panel-footer">
					<button @click="handleRemarkConfirm" type="primary" class="remarkPopup-panel-footer-btn">确定
					</button>
				</view>
			</view>
		</uni-popup>
		<!--  其他入库选择和拆箱时弹出(其他出库单号)  -->

		<uni-popup ref="otherOutPopup">
			<view class="selectPopup-panel">
				<view class="selectPopup-panel-top">
					<view class="selectPopup-panel-top-title">
						选择对应出库单号
					</view>
					<view class="selectPopup-panel-close" @click="closeOutPopup()">
						<uni-icons type="close" size="26" color="#adadad"></uni-icons>
					</view>
				</view>
			</view>
			
			<view>
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="outValue" @change="bindChangeOut" class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in outNoList" :key="index">{{item}}</view>
						</picker-view-column>
				</picker-view>
			</view>
		
			<view class="selectPopup-panel-footer">
				<button @click="handleOutNoConfirm" type="primary" class="selectPopup-panel-footer-btn">确定
				</button>
			</view>
		</uni-popup>

		<!--  操作面板  -->
		<min-action-sheet ref="as"></min-action-sheet>
		<!-- 扫描采购入库单号-->
		<!-- <purInPopup ref="purInPopupRef" @success=""></purInPopup> -->
		
		
	</view>
</template>

<script>
	import minActionSheet from '@/components/min-action-sheet/min-action-sheet'
	import uniLoading from "../../vBase/components/uni-loading/uni-loading"
	// import PurInPopup from "@/components/popup/purInPopup.vue"
	
	export default {
		data() {
			return {
				currentType: "",
				remark: "",
				selects:['外地','家电','网购'],
				typeSelect:[],
				type: '合-拆箱',
				select:'外地',
				tepeValue: [],
				value: [0,1,2],
				visible: true,
				outNo:'',
				outNoList:[],//其他出库单号
				outValue:[],//其他出库单号索引
				indicatorStyle: `height: 50px;`,
				_refresherTriggered: false,
				refresherTriggered: false,
			};
		},
		async onLoad(e){
			await this.getOtherOutList();
			
		},
		onShow() {
			this.outNoList = [];
			this.outValue = [];
			this.outNo = '';
			this.getOtherOutList()
		},
		
		components: {
			minActionSheet,
			uniLoading
		},
		methods: {
			
			//获取其他出库单号
			getOtherOutList(){
				this.$api.getOtherOutList({}).then( res => {
				
					if (res.res){
						let i = 0;
						res.data.forEach(element => {
							this.outNoList.push(element.billNo)
							this.outValue.push(i);
							i++;
						} )
						this.outNo = this.outNoList[0]
					}
				})
				
			},
			//选择销售拣货类型
			handleSelectConfirm(){
				if (!this.select) {
					uni.showToast({
						title: "请选择出库类型",
						icon: "none"
					})
					return
				}
				this.closeSelects()
				this.$navigateTo(`/pages/sale/sale?select=${this.select}`)
			},
			//选择出库单号并赋值
			bindChangeOut: function (e) {
				const val = e.detail.value
				this.outNo = this.outNoList[val[0]]
			},
			bindChange: function (e) {
			    const val = e.detail.value
			    this.select = this.selects[val[0]]
			},
			typeChange: function(e){
				const val = e.detail.value
				this.type = this.typeSelect[val[0]]
			},
			//销售拣货选择类型
			openSelects(){
				this.$refs.selectPopup.open("center")
			},
			
			
			/**
			 * 打开填写备注
			 * @param {Object} e
			 */
			openRemarks(e) {
				
				this.currentType = e
				this.remark = ""
				if (e == 'inStock'){
					this.typeSelect = ['合-拆箱','实验','沫沫','无']
					this.typeValue = [0,1,2,3]
					
				} else if (e == 'outStock'){
					this.typeSelect = ['合-拆箱','实验','质检','沫沫','无','包材出库']
					this.typeValue = [0,1,2,3,4,5]
				}
				
				this.$refs.remarkPopup.open("center")
				
			},
			
			/**
			 * 关闭
			 */
			closeRemarks() {
				this.$refs.remarkPopup.close()
			},
			closeOutPopup(){
				this.$refs.otherOutPopup.close()
			},
			//关闭类型选择
			closeSelects(){
				this.$refs.selectPopup.close()
			},
			closetypePopup(){
				this.$refs.typePopup.close()
				
			},
			//选择完对应出库单号后
			handleOutNoConfirm(){
				this.closeOutPopup()
				//跳转到其他入库操作页面
				this.$navigateTo(`/pages/storehouse/inStock?remark=${this.remark}&type=${this.type}&outNo=${this.outNo}`)
			},
			/**
			 * 填写原因确定
			 */
			handleRemarkConfirm() {
				
				this.closeRemarks()
				this.$refs.typePopup.open("center")
				this.type = '合-拆箱'
			
			},
			//选择出库库类型
			handleTypeConfirm(){
				this.closetypePopup()
				if (this.currentType === 'inStock') {
					if (this.type == '合-拆箱'){
						this.$refs.otherOutPopup.open("center")
					} else{
						this.$navigateTo(`/pages/storehouse/inStock?remark=${this.remark}&type=${this.type}`)
					}
				
				} else if (this.currentType === 'outStock') {
					this.$navigateTo(`/pages/storehouse/outStock?remark=${this.remark}&type=${this.type}`)
				}
			},
			
			/**
			 * 顶部按钮事件
			 * @param {Object} e
			 */
			onNavigationBarButtonTap(e) {
				this.$refs.as.handleShow({
					actions: [{
						name: '退出登录',
					}, ],
					success: (res) => {
						switch (res.id) {
							// -1代表取消按钮
							case -1:
								console.log(res)
								break
							case 0:
								this.$navigateTo("/pages/login/login")
								break
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
		.selectPopup-panel-top{
			position: relative;
			background-color: #fff;
			height: 30%;
			
			text-align: center;
			.selectPopup-panel-top-title{
				text-align: center;
				font-size: 18px;
			}
		}
		.selectPopup-panel-close{
			position: absolute;
			top: 0px;
			right: 0rpx;
		}
	
		.picker-view {
			width: 750rpx;
			height: 300rpx;
			margin: 10px 0;
			background-color: #fff;
		}
		.item {
			line-height: 100rpx;
			text-align: center;
		}
		.selectPopup-panel-footer {
			.selectPopup-panel-footer-btn {
				width: 40vw;
				font-size: 14px;
				margin: auto;
				}
			}
		
	
	.remarkPopup-panel {
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
	
		.remarkPopup-panel-top {
			position: relative;
	
			.remarkPopup-panel-top-title {
				text-align: center;
				font-size: 14px;
			}
			
			.remarkPopup-panel-close {
				position: absolute;
				top: -20rpx;
				right: -20rpx;
			}
		}
	
		.remarkPopup-panel-content {
			margin: 20px 0;
	
			.remarkPopup-panel-content-input {
				border: 1rpx solid $border-bd;
				border-radius: 10rpx;
				padding: 20rpx;
				width: 75vw;
			}
		}
	
		.remarkPopup-panel-footer {
			.remarkPopup-panel-footer-btn {
				width: 75vw;
				font-size: 14px;
				margin: auto;
			}
		}
	}
	.menu-body {
		.menu {
			background-color: white;
			border-bottom: 10px solid #f8f8f8;

			.title {
				height: 40px;
				font-weight: 600;
				line-height: 40px;
				font-size: 16px;
				padding: 0 10px;
				border-bottom: 1px solid #f8f8f8;
			}

			.menu-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 15px 20px;

				.menu-item {
					display: flex;
					align-items: center;
					justify-content: center;
					width: calc(50% - 10px);
					height: 80px;
					background-color: white;
					border-radius: 8px;
					box-shadow: 0px 4px 10px 0px rgba(202, 202, 202, 0.3);
					box-sizing: border-box;
					border: 1px solid rgba(255, 78, 116, .2);

					&:nth-child(n + 3) {
						margin-top: 20px;
					}

					.iconfont {
						margin-right: 8px;
						font-size: 18px;
						background: #1cd1bc;
						color: white;
						border-radius: 4px;
						padding: 3px;
					}
				}
			}
		}
	}
</style>
